<template>
  <view class="keyword">
    <view class="title">热门搜索</view>
    <view class="tag-list">
      <view v-for="(item,index) in hotList" :key="index" @click="clickTaghandler(item)">{{item}}</view>

    </view>
    <!-- space-between全局CSS变量 flex 布局两端对齐 -->
    <view class="title space-between">
      <text>历史搜索</text>
      <text @click="clearHistory">清空</text>
    </view>
    <view class="tag-list">
      <view v-for="(item,index) in historyList" :key="index" @click="clickTaghandler(item)">{{item}}</view>

    </view>

  </view>
</template>

<script>
//历史搜索 保存到本地的key
const key = 'history_list'
export default {
  data () {
    return {
      hotList: ['java', 'Python', 'javascript', 'react'],

      //本地存储同步进行Sdync  getStorageInfoSync是本地所有的对象信息
      historyList: uni.getStorageSync(key)
    }
  },
  methods: {
    //清空事件
    clearHistory () {
      //先赋值为空
      this.historyList = []
      //移除key值  uni.removeStorageSync()
      uni.removeStorageSync(key)
    },
    //点击关键字标签
    clickTaghandler (content) {
      // console.log(content,'content')
      //传递给搜索框
      //针对APP端 获取当前页面实例
      // this.$parent.$scope.$getAppWebview() 
      // this.$mp.page.$getAppWebview() 
      // 1、上面两种方式都可实现获取当前页面的对象实例
      ///2、然后用setTitleNViewSearchInputText 给搜索框进行赋值(注意:是APP-plus)

      // #ifdef APP-PLUS
      const currentWebview = this.$mp.page.$getAppWebview()
      currentWebview.setTitleNViewSearchInputText(content)
      // #endif


      //H5的要用原生的JS来实现  
      //1、获取到当前的搜索框的classDOM元素
      //2、在用innerHTML 将提示内容清空
      //3、在获取Dom元素  的[type=search]  来固定值 赋值
      
      //#ifdef  H5
      //将提示内容清空
      const placeholder = document.querySelector('.uni-page-head-search-placeholder')
      placeholder.innerHTML = ''
      //传递关键字给输入框
      //获取具体的DOM元素  class type=search
      const inputSearch = document.querySelector('.uni-input-input[type=search]')
      inputSearch.value = content
      // #endif


      //触发父组件的搜索事件  search里面的doSearch  
      this.$emit('doSearch', { value: content })
    }
  }
}
</script>

<style lang="scss">
.keyword {
  padding: 25rpx;
  .title {
    font-size: 30rpx;
    color: #222222;
    text:last-child {
      color: #999;
    }
  }
  .tag-list {
    display: flex; //一行显示
    flex-wrap: wrap; //一行显示不下来就用这个
    margin-top: 30rpx;
    margin-bottom: 60rpx;
    view {
      font-size: 25rpx;
      color: #999;
      border: 1rpx solid #999;
      border-radius: 8rpx;
      padding: 6rpx 15rpx;
      margin: 15rpx;
      //超出范围用省略号代替
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
